@include('Admin.public.head')
<body>
@include('Admin.public.menu')
@include('Admin.public.head')
<style type="text/css">
#my-popup {
    max-height: 320px;}   
</style>
<body>
@include('Admin.public.menu')
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<div class=" admin-content" id="app">
    {{ csrf_field() }}
<div class="daohang">
		<ul>
			<li><button type="button" class="am-btn am-btn-default am-radius am-btn-xs"> 首页 </li>
			<li><button type="button" class="am-btn am-btn-default am-radius am-btn-xs">帮助中心<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a></button></li>
			<li><button type="button" class="am-btn am-btn-default am-radius am-btn-xs">奖金管理<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a></button></li>
			<li><button type="button" class="am-btn am-btn-default am-radius am-btn-xs">产品管理<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a></button></li>
		</ul>
</div>

<!--添加模态框-->
<div class="am-popup am-popup-inner" id="my-popup">
	    <div class="am-popup-hd">
      <h4 class="am-popup-title">新增角色</h4>
      <span data-am-modal-close
            class="am-close">&times;</span>
    </div>
	   <div class="am-popup-bd">

      <form class="am-form tjlanmu" action="/admin/roles/store" method="POST">
    	<input type="hidden" name="_token" value="{{ csrf_token() }}">
        <div class="am-form-group am-cf">
            <div class="zuo">角色名：</div>
            <div class="you">
                <input type="text" class="am-form-field"  name="name"  placeholder="请输入角色名">
                <!-- <p class="am-form-help">会员等级</p> -->
            </div>
        </div>

         <div class="am-form-group am-cf">
            <div class="zuo">描述：</div>
            <div class="you">
                <input type="text" class="am-form-field" name="description"  placeholder="请输入描述">
                <!-- <p class="am-form-help">密码</p> -->
            </div>
        </div>
   
        <div class="am-form-group am-cf">
          <div class="you">
            <p>
              <button type="submit" class="am-btn am-btn-success am-radius">立即添加</button>
              <button type="reset" class="am-btn am-btn-success am-radius">重新填写</button>

            </p>
          </div>
        </div>
      </form>
    </div>

</div>



<div class="admin-biaogelist">
    <div class="listbiaoti am-cf">
      <ul class="am-icon-users"> 角色管理</ul>

      <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">会员列表</a></dl>

      <dl>
        <button type="button" data-am-modal="{target: '#my-popup'}" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus" >
         新增角色
       </button>
      </dl>
      <!--这里打开的是新页面-->
    </div>

    <form class="am-form am-g">
          <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
            <thead>	
              <tr class="am-success">
      	      <th class="table-id">#</th>
                <th class="table-title">角色名称</th>
                <th class="table-title">描述</th>
                <th width="130px" class="table-set">操作</th>
              </tr>
            </thead>
      <tbody>
      	    @foreach($roles as $role)
              <tr>
                <td>{{$role->id}}</td>
                <td>{{$role->name}}</td>
                <td>{{$role->description}}</td>
                <td style="width:250px;">
                  <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                    <a href="/admin/roles/{{$role->id}}/permission">权限管理</a>
                    </div>
                  </div>
                </td>
              </tr>
             @endforeach
            </tbody>
          </table>
        <!--分页-->
      <!--  <ul class="am-pagination am-fr">
      <div class="block">
        <el-pagination 
          background
          :page-size="PagesData.to"
          :current-page = "PagesData.current_page"
          layout="total , prev, pager, next" 
          :total="PagesData.total"
          @prev-click="prevClick"
          @next-click="nextClick"
          @current-change="changeClick">
        </el-pagination>
        </div> 
      </ul> -->
      </form>
<!-- 引入组件库 -->

@include('Admin.public.foot')